<template>
  <div id="plant_list">
    <div class="plant_list_form">
      <el-form
        :inline="true"
        :model="formInline"
        label-width="120px"
        class="demo-form-inline"
      >
        <el-form-item label="名称搜索：">
          <el-input v-model="formInline.chinese_name" style="width: 200px;" placeholder="名称" />
        </el-form-item>
        <el-form-item label="战区分布：">
          <el-select v-model="formInline.war_zone" clearable placeholder="请选择">
            <el-option
              v-for="item in formInline.war_zoneArr"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="军事医学应用：">
          <el-select v-model="formInline.military_medical_class" clearable placeholder="请选择">
            <el-option
              v-for="item in formInline.military_medical_classArr"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="传统功效：">
          <el-select v-model="formInline.traditional_efficacy_class" clearable placeholder="请选择">
            <el-option
              v-for="item in formInline.traditional_efficacy_classArr"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="疾病名称：">
          <el-select v-model="formInline.disease_name_class" clearable placeholder="请选择">
            <el-option
              v-for="item in formInline.disease_name_classArr"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="军事野外应用：">
          <el-select v-model="formInline.types_of_military_applications" clearable placeholder="请选择">
            <el-option
              v-for="item in formInline.useArr"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="应用部位：">
          <el-select v-model="formInline.medicinal_parts" clearable placeholder="请选择">
            <el-option
              v-for="item in formInline.medicinal_partsArr"
              :key="item"
              :label="item"
              :value="item"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="" style="margin-left: 20px;">
          <el-button class="pull-left" type="primary" @click="getList('search')">查询</el-button>
          <el-button v-permission="['管理者']" class="pull-left" type="primary" @click="add">新增</el-button>
          <el-upload
            class="pull-left"
            style="margin-left: 10px"
            action=""
            :http-request="importFile"
            list-type="picture"
          >
            <el-button v-permission="['管理者']" plain type="primary">导入</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <div class="plant_list_table">
      <el-table :data="tableData" v-loading="loading" :show-overflow-tooltip="true" style="width: 100%">
        <el-table-column prop="number" label="编号" width="80" align="center"/>
        <el-table-column label="图片" width="200"  align="center">
          <template slot-scope="scope">
            <div class="imgs">
              <el-image
                style="width: 88px; height: 88px"
                :src="scope.row.imgs_hand_painted_url[0]"
                fit="cover"
                :preview-src-list="scope.row.imgs_hand_painted_url"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="chinese_name" label="植物名称" width="150"  align="center"/>
        <el-table-column prop="latin_name" label="拉丁学名"  align="center"/>
        <el-table-column prop="alias" label="别名"  align="center"/>
        <el-table-column prop="medicinal_name" label="药材名" width="150"  align="center"/>
        <!-- <el-table-column label="文字描述" align="center">
          <template slot-scope="scope">
            <div class="describe" :title="scope.row.describe_info">
              {{ scope.row.describe_info }}
            </div>
          </template>
        </el-table-column> -->
        <el-table-column label="操作"  align="center">
          <template slot-scope="scope">
            <el-button style="text-decoration: underline;" type="text" size="small" @click="goDetail(scope.row.id)">查看</el-button>
            <el-button v-permission="['管理者']" style="text-decoration: underline;" type="text" size="small" @click="goEdit(scope.row.id)">编辑</el-button>
            <el-popconfirm
              title="是否确定删除此信息？"
              confirm-button-text="确 认"
              cancel-button-text="取 消"
              @onConfirm="deleteRow(scope.row.id)"
            >
              <el-button slot="reference" v-permission="['管理者']" style="color:#FF4D4F;margin-left: 8px;" type="text" size="small">删除</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination
      :current-page="currentPage"
      :page-size="5"
      layout="total, prev, pager, next, jumper"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleSizeChange"
    />
  </div>
</template>

<script>
import { getList, importZipFile, deletePlant } from '@/api/plantList'
import { options } from '@/api/question'
export default {
  data() {
    return {
      tableData: [],
      currentPage: 1,
      total: 1,
      formInline: {
        chinese_name: '',
        war_zone: '',
        military_medical_class: '',
        traditional_efficacy_class: '',
        disease_name_class: '',
        types_of_military_applications: '',
        medicinal_parts: '',

        war_zoneArr: [],
        military_medical_classArr: [],
        traditional_efficacy_classArr: [],
        disease_name_classArr: [],
        useArr: [],
        medicinal_partsArr: [],
      },
      loading: false
    }
  },
  mounted() {
    this.getList()
  },
  mounted() {
    this.getList()
    this.getOptions()
  },
  methods: {
    async deleteRow(id) {
      const res = await deletePlant(id)
      if (res.code == 200) {
        this.getList()
      }
    },
    async importFile(item) {
      if (!item.file.name.includes('.zip')) {
        this.$message.error('请上传ZIP格式')
        return
      }
      const loading = this.$loading({
        lock: true,
        text: '正在上传',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const formData = new FormData()
      formData.append('file', item.file)
      const res = await importZipFile(formData)
      if (res.code == 200 && res.data) {
        loading.close()
        this.$message({
          message: res.data,
          type: 'success'
        })
      }
    },
    goDetail(id) {
      this.$router.push(`/plantlib/detail/${id}`)
    },
    goEdit(id) {
      this.$router.push(`/plantlib/edit/${id}`)
    },
    async getOptions() {
      const res = await options()
      if (res.code == 200 && res.data) {
        this.formInline.war_zoneArr = ['所有', ...res.data.war_zone]
        this.formInline.military_medical_classArr = ['所有', ...res.data.military_medical_class]
        this.formInline.traditional_efficacy_classArr = ['所有', ...res.data.traditional_efficacy_class]
        this.formInline.disease_name_classArr = ['所有', ...res.data.disease_name_class]
        this.formInline.useArr = ['所有', ...res.data.use]
        this.formInline.medicinal_partsArr = ['所有', ...res.data.plant_parts]
      }
    },
    handleSizeChange(val) {
      this.currentPage = val
      this.getList()
    },
    add() {
      this.$router.push('/plantlib/add')
    },
    async getList(type) {
      if (type == 'search') {
        this.currentPage = 1
      }
      const conditions = []
      for (const key in this.formInline) {
        const isString = Object.prototype.toString.call(this.formInline[key]) == '[object String]'
        const value = this.formInline[key]
        if (isString && value) {
          conditions.push({
            key,
            operator: 'like',
            value
          })
        }
      }
      const data = {
        page_num: this.currentPage,
        page_size: 5,
        conditions,
        order_info: {
          key: 'number',
          order: 'asc'
        }
      }
      this.loading = true
      const res = await getList(data)
      if (res.code == 200 && res.data) {
        const data = res.data
        data.forEach(item => {
          item.imgs_hand_painted_url = item.hand_painted_url && item.hand_painted_url.includes(',') ? item.hand_painted_url.split(',') : [item.hand_painted_url]
          item.imgs_whole_plant_url = item.whole_plant_url && item.whole_plant_url.includes(',') ? item.whole_plant_url.split(',') : [item.whole_plant_url]
        })
        console.log(data)
        this.tableData = data
        this.total = res.paging.total
        this.loading = false
      }
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
#plant_list{
  position: relative;
  min-height: calc(100vh - 150px);
  padding-bottom: 100px;
  .describe{
    width: 100%;
    overflow:hidden;
    text-overflow:ellipsis;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:3;
  }
  .imgs{
    text-align: center;
  }
  .el-select{
    width: 200px;
  }
  .el-pagination{
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: - 300px;
    width: 600px;
  }
}
</style>
<style lang="scss">
  #plant_list .el-upload-list{
    display: none;
  }
</style>
